<template>
  <view class="member-list-item">
    <!--        信息主体-->
    <view class="item-container flex">
      <view v-if="logo" class="item-container-logo">
        <image :src="logo" class="shopLogo" />
      </view>
      <view class="item-container-info">
        <view v-if="shopName" class="shopName">{{ shopName }}</view>
        <view v-if="address" class="shopAddress"
          >{{ provinceCode }}{{ cityCode }}{{ areaCode }}{{ address }}</view
        >
      </view>
      <view
        class="item-container-distance flex-justify-content-center"
        @click="handleOpenLocation"
        ><u-icon name="map" size="35rpx" />
        {{ distance }}
      </view>
    </view>
    <!--        营业时间-->
    <view class="item-content"
      >营业时间:<text style="margin-left: 10rpx"
        >{{ openTimeStr }}-{{ closeTimeStr }}</text
      ></view
    >
    <!--        配送服务-->
    <view
      class="item-content send-server flex-align-center"
      v-if="tags && tags.length > 0"
    >
      配送服务:
      <view v-for="tag in tags" class="send-server-tag" :key="tag">
        {{ tag }}
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "index",
  props: {
    logo: String,
    shopName: String,
    address: String,
    provinceCode: String,
    cityCode: String,
    areaCode: String,
    distance: String,
    openTimeStr: String,
    closeTimeStr: String,
    tags: Array,
    latitude: Number,
    longitude: Number,
  },
  computed: {
    themeColor({ $theme }) {
      return $theme.themeColor.primary;
    },
    imgBaseUrl() {
      return process.env.VUE_APP_BASE_FileUrl;
    },
  },
  methods: {
    handleOpenLocation() {
      uni.openLocation({
        name: this.shopName,
        address: this.address,
        latitude: this.latitude,
        longitude: this.longitude,
      });
    },
  },
};
</script>

<style scoped lang="scss">
.item-container {
  margin: 28rpx 0 30rpx 0;
  &-info {
    margin-left: 25rpx;
    flex: 1;
  }
  &-distance {
    //height: 143rpx;
    flex-wrap: wrap;
    font-size: 26rpx;
    display: flex;
    width: min-content;
  }
  .shopLogo {
    width: 143rpx;
    height: 143rpx;
    border-radius: 8rpx;
  }
  .shopName {
    font-weight: bold;
    font-size: 29rpx;
  }
  .shopAddress {
    font-size: 27rpx;
    font-weight: 500;
    color: #888888;
    margin: 24rpx 0;
  }
}
.item-content {
  padding-bottom: 35rpx;
  font-size: 29rpx;
}
.send-server {
  border-bottom: 1rpx solid #f7f7f7;
  &-tag {
    background: #f5f5f5;
    border-radius: 25rpx;
    padding: 13rpx 21rpx;
    margin-right: 16rpx;
    font-size: 26rpx;
    &:first-child {
      margin-left: 10rpx;
    }
  }
}
</style>
